<template>
    <div class="location">
        <div class="location-iframe" v-if="storeLongitude&&storeLatitude&&userLocation.longitude&&userLocation.latitude&&showMap">
            <!--<iframe height="100%" width="100%" src="https://map.qq.com/nav/drive#routes/page?eword=''&epointx=116.39710&epointy=39.917200&referer=myapp&start=116.308044,39.983932&dest=116.39710,39.917200&sword=" frameborder="0"></iframe>-->
            <iframe style="width: 3.75rem;height:6.67rem;height: 100vh;" :src="`https://map.qq.com/nav/drive#routes/page?eword=${endAdress}&epointx=${storeLongitude}&epointy=${storeLatitude}&referer=os&start=${storeLongitude},${storeLatitude}&dest=${userLocation.longitude},${userLocation.latitude}&sword=${startAdress}`" frameborder="0"></iframe>
        </div>
    </div>
</template>

<script>
    import XLocation from '../../x/XLocation';
    export default {
        name: "Location",
        data(){
            return{
                userLocation:{},//用户位置经纬度
                storeLongitude:0,//经度
                storeLatitude:0,//经度
                startAdress:'起点',//开始位置
                endAdress:'终点',//结束位置
                showMap:false,//显示地图
            }
        },
        created(){
            this.storeLongitude = this.$route.query.storeLongitude;
            this.storeLatitude = this.$route.query.storeLatitude;
        },
        mounted(){
            this.getEndAddress();
            this.location()
        },
        methods:{
            location(){
                this.getLocation();
                /*先定位，然后再获取用户的地理信息*/
                XLocation.userGetHeSelfLocation();
                setTimeout(()=>{
                    this.userLocation = XLocation.getUserLocation();
                    this.getUserAddress();
                },600);
            },
            getLocation(){
                /*TODO 暂时没有后台的定位，先放着*/
                XLocation.refreshUserLocationByQQLbs();
                this.userLocation = XLocation.getUserLocation();
            },
            getUserAddress(){
                let that = this;
                let url = `${this.NW_API_API_LOCALE_VERSION}/position/info`;
                let userLongitude = that.userLocation.longitude || this.$store.state.currentUser.longitude || 0;
                let userLatitude = that.userLocation.latitude || this.$store.state.currentUser.latitude || 0;
                let params={
                    longitude:userLongitude,
                    latitude:userLatitude,
                };
                this.xurl.get(url,params).then((data)=>{
                    if(data.success){
                        this.startAdress = data.result.address;
                    }
                });
                setTimeout(()=>{
                    this.showMap = true;
                },300)
            },
            getEndAddress(){
                let that = this;
                let url = `${this.NW_API_API_LOCALE_VERSION}/position/info`;
                let params={
                    longitude:that.storeLongitude,
                    latitude:that.storeLatitude,
                };
                this.xurl.get(url,params).then((data)=>{
                    if(data.success){
                        this.endAdress = data.result.address;
                    }
                });
            },
        }
    }
</script>

<style scoped>
    .location-iframe{
        width: 3.75rem;
        height: 6.67rem;
        height: 100vh;
        z-index: 1000;
        position: relative;
    }
</style>